
<script>
const menu = [
    {
        menuID: '1',
        menuIcon: 'Location',
        menuPath: '/defaultContent',
        menuComponent: '@/views/modules/UserDefaultContent/List.vue',
        menuName: '首页'
    },
    {
        menuID: '2',
        menuIcon: 'Location',
        menuPath: '/userManegement',
        menuComponent: '@/views/modules/user/List.vue',
        menuName: '用户管理'
    },
    {
        menuID: '3',
        menuIcon: 'Location',
        menuPath: '/roomManagement',
        menuComponent: '@/views/modules/home/List.vue',
        menuName: '房间管理'
    },
    {
        menuID: '4',
        menuIcon: 'Location',
        menuPath: '/roomTypeManagement',
        menuComponent: '@/views/modules/homeType/List.vue',
        menuName: '房间类型管理'
    },
    {
        menuID: '5',
        menuIcon: 'Location',
        menuPath: '',
        menuComponent: '',
        menuName: '我的',
        children: [
            {
                menuID: '6',
                menuIcon: 'Location',
                menuPath: '/updatePassword',
                menuComponent: '@/views/modules/resetPassword/List.vue',
                menuName: '修改密码'
            },
            {
                menuID: '7',
                menuIcon: 'Location',
                menuPath: '/myDetail',
                menuComponent: '@/views/modules/myDetail/Detail.vue',
                menuName: '个人中心',
            }
        ]
    },
    {
        menuID: '8',
        menuIcon: 'Location',
        menuPath: '',
        menuComponent: '',
        menuName: '系统管理',
        children: [
            {
                menuID: '9',
                menuIcon: 'Location',
                menuPath: '/b',
                menuComponent: '../views/common/userInfo/Detail.vue',
                menuName: '轮播图管理'
            },
            {
                menuID: '10',
                menuIcon: 'Location',
                menuPath: '/authorityManagement',
                menuComponent: '@/views/modules/authority/List.vue',
                menuName: '用户权限管理'
            },
        ]
    },
    {
        menuID: '11',
        menuIcon: 'Location',
        menuPath: '/financeManagement',
        menuComponent: '@/views/modules/finance/List.vue',
        menuName: '可视化报表'
    }

]
import DashboardHeader from '@/views/admin/canCopy/DashboardHeader.vue'
import DashboardASide from '@/views/admin/canCopy/DashboardAside.vue'
export default {
    name: 'DashboardIndex',
    components: {
        DashboardHeader, DashboardASide
    },
    data() {
        return {
            ASideMenus: menu,
        }
    },
    methods: {

    },
}
</script>

<!-- 
    任何的中台入口都在此进入，传递header-menu，aside-menu，内容是动态生成的
 -->
<template>
    <el-scrollbar id="dashboard-header" height="100vh">
        <el-container>
            <el-header>
                <DashboardHeader />
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <DashboardASide :menus="ASideMenus" />
                </el-aside>
                <el-main>
                    <router-view class="dashboard-main" />
                    <!-- <DefaultContent class="main" /> -->
                </el-main>
            </el-container>
        </el-container>

    </el-scrollbar>
</template>


<style scoped lang="scss">
$header-height: 60px;
$aside-width: 200px;
$z-index: 10;

#dashboard-header {
    position: relative;

    .el-header {
        position: sticky;
        padding: 0;
        top: 0;
        left: 0;
        z-index: $z-index;
    }

    .el-aside {
        position: absolute;
        left: 0;
        top: $header-height;
        z-index: $z-index;
    }

    .el-main {
        padding: 0;
        // padding-top: 10px;
        padding-left: $aside-width;
    }

}
</style>